<template>
  <div>
      <div class="card" icon="ios-options">
            <div style="text-align: right;margin-top: 10px">
              <Button size="small" type="error" @click="clearPick">清空</Button>
            </div>
            <div>
              <div>
                <span class="zi">区：</span><Select style="width: 210px" filterable  :disabled="Adisabled" v-model="select1" class="cardSelect" @on-change="findSubordinateList(3,select1)">
                <Option v-for="item in select1List" :value="item.id" :key="item.id">{{ item.name }}</Option>
              </Select>
              </div>
              <div>
                <span class="zi">街道：</span><Select style="width: 210px"  filterable  :disabled="Bdisabled"  v-model="select2" class="cardSelect" @on-change="findSubordinateList(4,select2)">
                <Option v-for="item in select2List" :value="item.id" :key="item.id">{{ item.name }}</Option>
              </Select>
              </div>
              <div>
                <span class="zi">社区：</span><Select style="width: 210px"  filterable  :disabled="Cdisabled"  v-model="select3" class="cardSelect" @on-change="findSubordinateList(5,select3)">
                <Option v-for="item in select3List" :value="item.id" :key="item.id">{{ item.name }}</Option>
              </Select>
              </div>
              <div>
                <span class="zi">网格：</span><Select style="width: 210px"  filterable  v-model="select4" class="cardSelect" @on-change="findSubordinateList(6,select4)">
                <Option v-for="item in select4List" :value="item.id" :key="item.id">{{ item.name }}</Option>
              </Select>
              </div>
              <div>
                <span class="zi">楼：</span><Select style="width: 210px"  filterable  v-model="select5" class="cardSelect" @on-change="findSubordinateList(7,select5)">
                <Option v-for="item in select5List" :value="item.id" :key="item.id">{{ item.name }}</Option>
              </Select>
              </div>
            </div>
          </div>
  </div>
</template>

<script>
import { findSelectOfficList, findSubordinateList, getSuperior, findGridAllList } from '@/api/eventlist'

export default {
  name: 'grid-select',
  data () {
    return {
      Adisabled: false,
      Bdisabled: false,
      Cdisabled: false,
      companyInfo: {},
      select1: '',
      select2: '',
      select3: '',
      select4: '',
      select5: '',
      select1List: [],
      select2List: [],
      select3List: [],
      select4List: [],
      select5List: [],
      areaList: [],
      streetList: [],
      communityList: [],
      gardenList: [],
      buildingList: [],
      pickID: '',
      pickGrade: ''
    }
  },
  methods: {
    // 初始化
    init () {
      this.companyInfo = this.$store.state.user.severUserInfo
      switch (this.companyInfo.company_grade) {
        case '3':
          this.Adisabled = true
          break
        case '4':
          this.Adisabled = true
          this.Bdisabled = true
          break
        case '5':
          this.Adisabled = true
          this.Bdisabled = true
          this.Cdisabled = true
          this.findGridAllList()
          break
      }
      this.pickID = this.companyInfo.company_id
      this.pickGrade = this.companyInfo.company_grade
      this.findOfficeAllList()
      // this.findGridAllList()
    },
    // 查询所有sys_office部分数据
    findOfficeAllList () {
      findSelectOfficList().then(ret => {
        if (ret.data.errcode === 0) {
          this.select1 = ret.data.data.area_id
          this.select2 = ret.data.data.street_id
          this.select3 = ret.data.data.community_id
          this.areaList = ret.data.data.areaList
          this.streetList = ret.data.data.streetList
          this.communityList = ret.data.data.communityList
          this.select1List = ret.data.data.areaList
          this.select2List = ret.data.data.streetList
          this.select3List = ret.data.data.communityList
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    // 查询网格部分所有数据
    findGridAllList () {
      findGridAllList().then(ret => {
        if (ret.data.errcode === 0) {
          this.gardenList = ret.data.data.gardenList
          this.buildingList = ret.data.data.buildingList
          this.select4List = ret.data.data.gardenList
          this.select5List = ret.data.data.buildingList
        } else {
          this.$Notice.error({ title: '查询失败！', desc: 'findGridAllList查询失败' })
        }
      })
    },
    // select
    findSubordinateList (e1, e2) {
      if (e2 !== undefined) {
        let data = {
          grade: e1,
          id: e2
        }
        findSubordinateList(data).then(ret => {
          if (ret.data.errcode === 0) {
            let result = ret.data.data
            this.disposeResult(e1, e2, result)
          } else {
            this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
          }
        })
      }
    },
    // 处理结果集
    disposeResult (e1, e2, e3) {
      // e1 级别  e2  id  e3 查询返回结果集
      switch (e1) {
        case 3: // 当前级别选择区，处理下级
          this.select2List = e3
          this.select2 = ''
          this.select3 = ''
          this.select4 = ''
          this.select5 = ''
          this.select3List = this.communityList
          this.select4List = this.gardenList
          this.select5List = this.buildingList
          this.disposepickInfo()
          break
        case 4: // 当前界别选择为街道，处理上级，下级
          this.getSuperior(e1, e2)
          this.select3List = e3
          this.select3 = ''
          this.select4 = ''
          this.select5 = ''
          this.select4List = this.gardenList
          this.select5List = this.buildingList
          break
        case 5: // 当前界别选择为社区，处理上级，下级
          this.getSuperior(e1, e2)
          this.select4List = e3
          this.select4 = ''
          this.select5 = ''
          this.select5List = this.buildingList
          break
        case 6: // 当前界别选择为社区，处理上级，下级
          this.getSuperior(e1, e2)
          this.select5List = e3
          this.select5 = ''
          break
        case 7: // 当前界别选择为社区，处理上级，下级
          this.getSuperior(e1, e2)
          break
      }
    },
    // 查询上级
    getSuperior (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      getSuperior(data).then(ret => {
        if (ret.data.errcode === 0) {
          let result = ret.data.data
          switch (e1) {
            case 4:
              this.select1 = result.select1.id
              this.select1List = this.areaList
              break
            case 5:
              this.select1List = this.areaList
              this.select1 = result.select1.id
              this.select2List = this.streetList
              this.select2 = result.select2.id
              break
            case 6:
              this.select1List = this.areaList
              this.select1 = result.area_id
              this.select2List = this.streetList
              this.select2 = result.street_id
              this.select3List = this.communityList
              this.select3 = result.community_id
              break
            case 7:
              this.select1List = this.areaList
              this.select1 = result.area_id
              this.select2List = this.streetList
              this.select2 = result.street_id
              this.select3List = this.communityList
              this.select3 = result.community_id
              this.select4List = this.gardenList
              this.select4 = result.garden_id
              break
          }
          this.disposepickInfo()
        } else {
          // this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    // 清空下拉选中
    clearPick () {
      location.reload()
      // if (parseInt(this.companyInfo.company_grade) === 2) {
      //   this.select1 = ''
      //   this.select2 = ''
      //   this.select3 = ''
      //   this.select1List = this.areaList
      // } else if (parseInt(this.companyInfo.company_grade) === 3) {
      //   this.select2 = ''
      //   this.select3 = ''
      //   this.select2List = this.streetList
      //   this.select3List = this.communityList
      // } else if (parseInt(this.companyInfo.company_grade) === 4) {
      //   this.select3 = ''
      //   this.select3List = this.communityList
      // }
      // this.select4 = ''
      // this.select5 = ''
      // this.select4List = this.gardenList
      // this.select5List = this.buildingList
      // this.disposepickInfo()
    },
    // 处理选中
    disposepickInfo () {
      console.log('compant_info', this.companyInfo)
      if (this.select5 !== undefined && this.select5 !== '') {
        this.pickID = this.select5
        this.pickGrade = '7'
      } else if (this.select4 !== undefined && this.select4 !== '') {
        this.pickID = this.select4
        this.pickGrade = '6'
      } else if (this.select3 !== undefined && this.select3 !== '') {
        this.pickID = this.select3
        this.pickGrade = '5'
      } else if (this.select2 !== undefined && this.select2 !== '') {
        this.pickID = this.select2
        this.pickGrade = '4'
      } else if (this.select1 !== undefined && this.select1 !== '') {
        this.pickID = this.select1
        this.pickGrade = '3'
      } else {
        this.pickID = this.companyInfo.company_id
        this.pickGrade = this.companyInfo.company_grade
      }
    }
  },
  mounted () {
    this.init()
  },
  watch: {
    pickID (val) {
      if (val) {
        this.$emit('getPickInfo', this.pickID, this.pickGrade)
      }
    }
  }
}
</script>

<style scoped>
  .zi{
    color: white;
  }
  .cardSelect{
    width: 200px;
  }

  .card {
    background:rgba(255,255,255,0.93);
    height:450px;
    overflow: auto;
    z-index: 1000;
    background: #235CA7;
  }

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: rgba(255,255,255,0.93);
  }

  ::-webkit-scrollbar-thumb {
    border-radius:5px;
    -webkit-box-shadow: inset 0 0 6px rgba(250, 250, 250, .3);
    background-color: rgba(220,220,220,0.93);
  }

  ::-webkit-scrollbar-corner {
    background-color: rgba(255,255,255,0.93);
  }

  .toolbar {
    text-align: center;
    margin-top: 10px;
  }

  .search1 {
    width: 200px;
    position: absolute;
    top: 30px;
    left: 300px;
    z-index: 1000;
  }

  .search_input {
    display: inline-block;
    width: 160px;
  }

  .search_input /deep/ input {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    background-color: rgba(255,255,255,0.93) !important;
  }

  .search_btn {
    display: inline-block;
    width: 40px;
    height: 32px;
    cursor: pointer;
    background-color: rgba(45,140,240,0.93);
    color: #fff;
    z-index: 1001;
    font-size: 12px;
    border: 1px solid transparent;
    transition: border 0.2s ease-in-out, background 0.2s ease-in-out, box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    vertical-align: middle;
    line-height: normal;
    position: absolute;
    left: 160px;
  }

  .search_btn:hover {
    background: #57a3f3 !important;
    border-color: #57a3f3 !important;
  }

  .search_btn:active {
    background: #2b85e4 !important;
    border-color: #2b85e4 !important;
  }

  .page_style {
    margin-top: 10px;
    position: relative;
  }

</style>
